<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新增角色</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../plugins/zTree_v3/js/zTreeStyle.css">
    <link rel="stylesheet" href="../plugins/layui/css/layui.css" media="all" />
    <link rel="stylesheet" href="../plugins/layui/css/myPage.css">
    <script src="../plugins/zTree_v3/js/jquery-2.2.3.min.js"></script>
    <script src="../plugins/zTree_v3/js/jquery.ztree.all.min2.js"></script>
    <script src="../js/roledata.js"></script>
</head>
<body>
<div class="layui-container">
    <form class="layui-form">

        <div class="layui-container">



            <fieldset class="layui-elem-field" style="margin-top: 20px;width: 100%;height: 100%">
                <legend>新增角色</legend>
                <div class="layui-row ">
                    <div class="layui-form">

                            <div class="layui-col-md8">
                                <div class="layui-inline ">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label" style="width: 70px;"><span style="color: red;">*</span>角色名称</label>
                                        <div class="layui-input-inline" style="width: 150px;">
                                            <input type="text" name="jsmc" lay-verify="required" required class="layui-input"
                                                   id="jsmc" lay-filter="jsmc">
                                        </div>
                                    </div>
                                </div>


                            </div>
                            <div class="layui-col-md4">



                                <div class="layui-form-item">
                                    <div class="layui-input-inline " style=" width:10%; position: relative;left: 12% ">
                                        <button lay-filter="form"  class="layui-btn layui-btn-normal  " lay-submit id="sumit">提交</button>
                                    </div>
                                </div>

                            </div>

                    </div>

                </div>

                <div class="layui-row layui-col-space30">


                    <div class="  layui-col-md2">
                        <ul id="jcsjgl" class="ztree"  ></ul>
                        <a id="jcsjglcheckAllTrue" href="#">全选</a>
                        <a id="jcsjglcheckAllFalse" href="#">取消全选</a>
                    </div>
                    <div class="  layui-col-md2">
                        <ul id="ywgl" class="ztree"></ul>
                        <a id="ywglcheckAllTrue" href="#">全选</a>
                        <a id="ywglcheckAllFalse" href="#">取消全选</a>
                    </div>
                    <div class="  layui-col-md2">
                        <ul id="yyfx" class="ztree"></ul>
                        <a id="yyfxcheckAllTrue" href="#">全选</a>
                        <a id="yyfxcheckAllFalse" href="#">取消全选</a>
                    </div>
                    <div class="  layui-col-md2">
                        <ul id="cwgl" class="ztree"></ul>
                        <a id="cwglcheckAllTrue" href="#">全选</a>
                        <a id="cwglcheckAllFalse" href="#">取消全选</a>
                    </div>
                    <div class="  layui-col-md2">
                        <ul id="xtgl" class="ztree"></ul>
                        <a id="xtglcheckAllTrue" href="#">全选</a>
                        <a id="xtglcheckAllFalse" href="#">取消全选</a>
                    </div>

                </div>

            </fieldset>
        </div>
    </form>
</div>

</body>
<script src="../plugins/layui/layui.js"></script>
<script src="../js/config.js"></script>
<script src="../js/tools.js"></script>
<script>
    layui.use(['form','layer','laydate','upload'],function () {

        var $ = layui.$;
        var layer = layui.layer;
        var form = layui.form;

        var rolejson = {};
        var setting1 = {
            check: {
                enable: true
            },
            view: {
                showLine: true,//显示节点之间的连线。
                selectedMulti: false  //允许同时选中多个节点。
            },
            data: {
                simpleData: {
                    enable: true, //使用简单数据模式
                    idKey: "id",//节点数据中保存唯一标识的属性名称
                    pIdKey: "pId",//节点数据中保存其父节点唯一标识的属性名称
                    rootPId: "" //用于修正根节点父节点数据 默认值：null
                }
            },
            callback: {
                onCheck: jcsjglOnCheck
            }
        };

        function jcsjglOnCheck(event, treeId, treeNode) {
                // console.log(treeNode)
            if(treeNode.checked  ){
                if(treeNode.id == "114" || treeNode.id == "113"|| treeNode.id == "112"){
                    jcsjgl.checkNode(jcsjgl.getNodeByParam("id","111"),true,false,false);
                }
                if(treeNode.id == "124" || treeNode.id == "123"|| treeNode.id == "122"){
                    jcsjgl.checkNode(jcsjgl.getNodeByParam("id","121"),true,false,false);
                }
                if(treeNode.id == "134" || treeNode.id == "133"|| treeNode.id == "132"){
                    jcsjgl.checkNode(jcsjgl.getNodeByParam("id","131"),true,false,false);
                }
                if(treeNode.id == "144" || treeNode.id == "143"|| treeNode.id == "142"){
                    jcsjgl.checkNode(jcsjgl.getNodeByParam("id","141"),true,false,false);
                }
                if(treeNode.id == "154" || treeNode.id == "153"|| treeNode.id == "152"){
                    jcsjgl.checkNode(jcsjgl.getNodeByParam("id","151"),true,false,false);
                }
                if(treeNode.id == "164" || treeNode.id == "163"|| treeNode.id == "162"){
                    jcsjgl.checkNode(jcsjgl.getNodeByParam("id","161"),true,false,false);
                }
            }



        }

        var setting2 = {
            check: {
                enable: true
            },
            view: {
                showLine: true,//显示节点之间的连线。
                selectedMulti: false  //允许同时选中多个节点。
            },
            data: {
                simpleData: {
                    enable: true, //使用简单数据模式
                    idKey: "id",//节点数据中保存唯一标识的属性名称
                    pIdKey: "pId",//节点数据中保存其父节点唯一标识的属性名称
                    rootPId: "" //用于修正根节点父节点数据 默认值：null
                }
            },
            callback: {
                onCheck: ywglOnCheck
            }
        };

        function ywglOnCheck(event, treeId, treeNode) {
            if(treeNode.checked  ){
                if(treeNode.id == "215" || treeNode.id == "216"|| treeNode.id == "217"|| treeNode.id == "218"){
                    ywgl.checkNode(ywgl.getNodeByParam("id","211"),true,false,false);
                }
                if(treeNode.id == "222" || treeNode.id == "223"|| treeNode.id == "224"|| treeNode.id == "225"){
                    ywgl.checkNode(ywgl.getNodeByParam("id","221"),true,false,false);
                }
                if(treeNode.id == "232" || treeNode.id == "233" ){
                    ywgl.checkNode(ywgl.getNodeByParam("id","231"),true,false,false);
                }
                if(treeNode.id == "242" || treeNode.id == "243" ){
                    ywgl.checkNode(ywgl.getNodeByParam("id","241"),true,false,false);
                }
                if(treeNode.id == "252" || treeNode.id == "253" ){
                    ywgl.checkNode(ywgl.getNodeByParam("id","251"),true,false,false);
                }
                if(treeNode.id == "262"   ){
                    ywgl.checkNode(ywgl.getNodeByParam("id","261"),true,false,false);
                }
                if(treeNode.id == "272"   ){
                    ywgl.checkNode(ywgl.getNodeByParam("id","271"),true,false,false);
                }
                if(treeNode.id == "282"   ){
                    ywgl.checkNode(ywgl.getNodeByParam("id","281"),true,false,false);
                }
            }

        }
        var setting3 = {
            check: {
                enable: true
            },
            view: {
                showLine: true,//显示节点之间的连线。
                selectedMulti: false  //允许同时选中多个节点。
            },
            data: {
                simpleData: {
                    enable: true, //使用简单数据模式
                    idKey: "id",//节点数据中保存唯一标识的属性名称
                    pIdKey: "pId",//节点数据中保存其父节点唯一标识的属性名称
                    rootPId: "" //用于修正根节点父节点数据 默认值：null
                }
            },
            callback: {
                onCheck: yyfxOnCheck
            }
        };

        function yyfxOnCheck(event, treeId, treeNode) {
            if(treeNode.checked  ) {
                if (treeNode.id == "312" || treeNode.id == "313"  ) {
                    yyfx.checkNode(yyfx.getNodeByParam("id", "311"), true, false, false);
                }
                if (treeNode.id == "322" || treeNode.id == "323"  ) {
                    yyfx.checkNode(yyfx.getNodeByParam("id", "321"), true, false, false);
                }
                if (treeNode.id == "332" || treeNode.id == "333"  ) {
                    yyfx.checkNode(yyfx.getNodeByParam("id", "331"), true, false, false);
                }
            }
        }
        var setting4 = {
            check: {
                enable: true
            },
            view: {
                showLine: true,//显示节点之间的连线。
                selectedMulti: false  //允许同时选中多个节点。
            },
            data: {
                simpleData: {
                    enable: true, //使用简单数据模式
                    idKey: "id",//节点数据中保存唯一标识的属性名称
                    pIdKey: "pId",//节点数据中保存其父节点唯一标识的属性名称
                    rootPId: "" //用于修正根节点父节点数据 默认值：null
                }
            },
            callback: {
                onCheck: cwglOnCheck
            }
        };

        function cwglOnCheck(event, treeId, treeNode) {
            if(treeNode.checked  ) {
                if (treeNode.id == "412" || treeNode.id == "413" || treeNode.id == "414"|| treeNode.id == "415") {
                    cwgl.checkNode(cwgl.getNodeByParam("id", "411"), true, false, false);
                }
                if (treeNode.id == "422" || treeNode.id == "423" || treeNode.id == "424") {
                    cwgl.checkNode(cwgl.getNodeByParam("id", "421"), true, false, false);
                }
                if (treeNode.id == "432" || treeNode.id == "433" || treeNode.id == "434") {
                    cwgl.checkNode(cwgl.getNodeByParam("id", "431"), true, false, false);
                }
            }
        }
        var setting5 = {
            check: {
                enable: true
            },
            view: {
                showLine: true,//显示节点之间的连线。
                selectedMulti: false  //允许同时选中多个节点。
            },
            data: {
                simpleData: {
                    enable: true, //使用简单数据模式
                    idKey: "id",//节点数据中保存唯一标识的属性名称
                    pIdKey: "pId",//节点数据中保存其父节点唯一标识的属性名称
                    rootPId: "" //用于修正根节点父节点数据 默认值：null
                }
            },
            callback: {
                onCheck: xtglOnCheck
            }
        };

        function xtglOnCheck(event, treeId, treeNode) {
            if(treeNode.checked  ) {
                if (treeNode.id == "512" || treeNode.id == "513" || treeNode.id == "514"|| treeNode.id == "515") {
                    xtgl.checkNode(xtgl.getNodeByParam("id", "511"), true, false, false);
                }
                if (treeNode.id == "522" || treeNode.id == "523" || treeNode.id == "524"|| treeNode.id == "525") {
                    xtgl.checkNode(xtgl.getNodeByParam("id", "521"), true, false, false);
                }
            }
        }




        var jcsjgl = $.fn.zTree.init($('#jcsjgl'), setting1, jcsjglNodes);
        var ywgl = $.fn.zTree.init($('#ywgl'), setting2, ywglNodes);
        var yyfx = $.fn.zTree.init($('#yyfx'), setting3, yyfxNodes);
        var cwgl = $.fn.zTree.init($('#cwgl'), setting4, cwglNodes);
        var xtgl = $.fn.zTree.init($('#xtgl'), setting5, xtglNodes);







        form.on('submit(form)', function(data){

           var  permisson =  $.merge($.merge($.merge($.merge(jcsjgl.getCheckedNodes(),ywgl.getCheckedNodes()),yyfx.getCheckedNodes()),cwgl.getCheckedNodes()),xtgl.getCheckedNodes());
           console.log(permisson)
           var perArr = new Array();
           permisson.forEach( function (item,index) {
               perArr.push(item.id);
           })

            var index = layer.load(1, {time: 10*1000});
           data.field.permsidList = perArr;
           console.log(data.field);
        $.ajax({
                        url: contextPath+"/role",
                        type: "POST",
                        contentType:"application/json;charset=utf-8",
                        dataType:"json",
                        data:  JSON.stringify(data.field),
                        success: function(res) {
                            layer.close(index);
                            layer.msg(res.message,{
                                icon: 1,
                                time: 1000 //2秒关闭（如果不配置，默认是3秒）
                            },function () {
                                var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                                parent.layer.close(index); //再执行关闭
                            });

                        }

                    });
            return false;
        });


        function jcsjglcheckNode(e) {
            var  Tree = $.fn.zTree.getZTreeObj("jcsjgl"),
                type = e.data.type;
            if (type.indexOf("All") < 0 && nodes.length == 0) {
                alert("请先选择一个节点");
            }
            if (type == "checkAllTrue") {
                Tree.checkAllNodes(true);

            } else if (type == "checkAllFalse") {
                Tree.checkAllNodes(false);

            }
        }
        $("#cjsj").val(getFormatDate());
        $("#jcsjglcheckAllTrue").bind("click", {type: "checkAllTrue"}, jcsjglcheckNode);
        $("#jcsjglcheckAllFalse").bind("click", {type: "checkAllFalse"}, jcsjglcheckNode);

        function jcsjglcheckNode(e) {
            var  Tree = $.fn.zTree.getZTreeObj("jcsjgl"),

                type = e.data.type;




            if (type.indexOf("All") < 0 && nodes.length == 0) {
                alert("请先选择一个节点");
            }
            if (type == "checkAllTrue") {
                Tree.checkAllNodes(true);

            } else if (type == "checkAllFalse") {
                Tree.checkAllNodes(false);

            }
        }
        $("#cjsj").val(getFormatDate());
        $("#jcsjglcheckAllTrue").bind("click", {type: "checkAllTrue"}, jcsjglcheckNode);
        $("#jcsjglcheckAllFalse").bind("click", {type: "checkAllFalse"}, jcsjglcheckNode);

        function ywglcheckNode(e) {
            var  Tree = $.fn.zTree.getZTreeObj("ywgl"),

                type = e.data.type;




            if (type.indexOf("All") < 0 && nodes.length == 0) {
                alert("请先选择一个节点");
            }
            if (type == "checkAllTrue") {
                Tree.checkAllNodes(true);

            } else if (type == "checkAllFalse") {
                Tree.checkAllNodes(false);

            }
        }

        $("#ywglcheckAllTrue").bind("click", {type: "checkAllTrue"}, ywglcheckNode);
        $("#ywglcheckAllFalse").bind("click", {type: "checkAllFalse"}, ywglcheckNode);

        function yyfxcheckNode(e) {
            var  Tree = $.fn.zTree.getZTreeObj("yyfx"),

                type = e.data.type;




            if (type.indexOf("All") < 0 && nodes.length == 0) {
                alert("请先选择一个节点");
            }
            if (type == "checkAllTrue") {
                Tree.checkAllNodes(true);

            } else if (type == "checkAllFalse") {
                Tree.checkAllNodes(false);

            }
        }

        $("#cjsj").val(getFormatDate());
        $("#yyfxcheckAllTrue").bind("click", {type: "checkAllTrue"}, yyfxcheckNode);
        $("#yyfxcheckAllFalse").bind("click", {type: "checkAllFalse"}, yyfxcheckNode);

        function cwglcheckNode(e) {
            var  Tree = $.fn.zTree.getZTreeObj("cwgl"),

                type = e.data.type;




            if (type.indexOf("All") < 0 && nodes.length == 0) {
                alert("请先选择一个节点");
            }
            if (type == "checkAllTrue") {
                Tree.checkAllNodes(true);

            } else if (type == "checkAllFalse") {
                Tree.checkAllNodes(false);

            }
        }

        $("#cwglcheckAllTrue").bind("click", {type: "checkAllTrue"}, cwglcheckNode);
        $("#cwglcheckAllFalse").bind("click", {type: "checkAllFalse"}, cwglcheckNode);

        function xtglcheckNode(e) {
            var  Tree = $.fn.zTree.getZTreeObj("xtgl"),

                type = e.data.type;




            if (type.indexOf("All") < 0 && nodes.length == 0) {
                alert("请先选择一个节点");
            }
            if (type == "checkAllTrue") {
                Tree.checkAllNodes(true);

            } else if (type == "checkAllFalse") {
                Tree.checkAllNodes(false);

            }
        }

        $("#xtglcheckAllTrue").bind("click", {type: "checkAllTrue"}, xtglcheckNode);
        $("#xtglcheckAllFalse").bind("click", {type: "checkAllFalse"}, xtglcheckNode);
    });


</script>
</body>
</html>